<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>京东万象笑话接口测试</title>
    <link rel="icon" type="image/x-icon" th:href="@{/favicon.ico}">
    <link rel="stylesheet" th:href="@{/libs/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>
    <div class="layui-main">
        <div class="layui-bg-cyan">
            <h3>测试接口说明文档地址: https://wx.jdcloud.com/market/datas/5/10914</h3>
        </div>
        <br>
        <br>
        <div class="layui-collapse joke-box" lay-accordion>

        </div>
        <br>
        <br>
        <div id="joke-page"></div>
    </div>

    <script type="text/javascript" th:src="@{/libs/layui/layui.js}"></script>
    <script type="text/javascript">
        var layer, laypage, element;

        $(function (){
            layui.use(['layer', 'laypage', 'element'], function (){
                layer = layui.layer,
                laypage = layui.laypage,
                element = layui.element;

                //加载笑话
                listJokes(10, 1);
            });
        });

        /**
         * 笑话项DOM拼接
         *
         * @param title 笑话标题
         * @param src 图片的地址
         * @param firstShow 第一个笑话项添加class名称'layui-show'
         */
        function itemDOM(title, src, firstShow) {
            return "<div class='layui-colla-item ayui-anim' data-anim='layui-anim-up'>"+
                "<h2 class='layui-colla-title'>"+ title + "</h2>"+
                "<div class='layui-colla-content" + firstShow + "'>"+
                "<img src='" + src + "' alt='" + title + "'/>"+
                "</div>"+
                "</div>";
        }

        /**
         * 渲染分页条
         *
         * @param allNum 总记录数
         * @param maxResult 每一页返回的最大结果集
         * @param currentPage 当前页
         */
        function pageInit(allNum, maxResult, currentPage) {
            // 执行一个laypage实例
            laypage.render({
                elem: "joke-page",  //容器ID
                count: allNum,           //总记录数
                limit: maxResult,          //每页显示的记录数
                curr: currentPage,
                jump: function(obj, first){                //页面跳转监听
                    //首次不执行
                    if (!first) {
                        listJokes(obj.limit, obj.curr);
                    }
                }
            });
        }

        /**
         * 获取笑话列表
         *
         * @param maxResult 每一页返回的最大结果集
         * @param currentPage 当前页
         */
        function listJokes(maxResult, currentPage) {
            if (maxResult == null || maxResult < 1){
                maxResult = 10;
            }
            if (currentPage == null || currentPage < 1){
                currentPage = 1;
            }
            $.ajax({
                url: "../joke/list",
                type: "POST",
                async: false,
                data: JSON.stringify({
                    maxResult:maxResult,
                    currentPage:currentPage,
                    t:{
                        ct:'2020-01-01'
                    }
                }),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (d){
                    //数据渲染
                    var str = "";
                    var jokes = d.result.t;
                    for (let i = 0; i < jokes.length; i++) {
                        if (i===0){
                            str = str + itemDOM(jokes[i].title.length === 0?"无标题": jokes[i].title + " - " + jokes[i].ct, jokes[i].img, ' layui-show');
                        } else {
                            str = str + itemDOM(jokes[i].title.length === 0?"无标题": jokes[i].title + " - " + jokes[i].ct, jokes[i].img, '');
                        }
                    }
                    $(".joke-box").empty().append(str);
                    element.render();
                    //渲染分页条(一定要设置当前页,否则会一直在第1页)
                    pageInit(d.result.allNum, d.result.maxResult, d.result.currentPage);
                },
                error: function () {
                    layer.open({
                        type: 0,
                        content: "load error"
                    });
                }
            });
        }
    </script>
</body>
</html>